/* colors */
@yellow: #f4b331;
@lightYellow: #ffff00;

@gray: #4d4d4d;
@middleGray: #666666;
@middleGray2: #999999;
@lightGray: #f2f2f2;

@white: #fff;
@help: 250;
@transparentWhite: rgba(@help, @help, @help, 0.85);

@red: #d34f1d;

@black: #000;

/* sizes */
@small: 0.7em;
@normal: 13px;
@big-1: 14px;
@big0: 16px;
@big1: 20px;
@big2: 25px;
@big3: 30px;
@big4: 40px;

/* Styles */
.lessons-menu{
  padding: 0;
  text-transform: uppercase;
  
  .menu{
    padding: 0 15px;
    
    @media (max-width: 767px){
      padding: 0;
      margin: 0;
    }
    
    .menu-field{
      padding: 10px 0;
      text-align: center;
      cursor: pointer;
      font-size: @big1;
      font-family: TitilliumLight;
      background: @lightGray;
      
      &:hover, &.active{
        color: @gray;
        font-weight: bold;
        background: @white;
        
        @media (max-width: 767px){
          background: @lightGray;
        }
      }
    }
  }
}

.submenu-container{
  background: @white;
  
  .submenu-categories{
    text-align: center;
    padding: 15px 0;
    
    a{
      padding: 0 20px;
      text-transform: uppercase;
      font-family: TitilliumLight;
      font-size: @big1;
      color: @middleGray2;
      
      &:last-of-type{
        border: none;
      }

      &.active{
        font-size: @big3;
        color: @gray;
      }
      
      &:focus{
        text-decoration: none;
      }
      
      &:hover{
        color: @gray;
      }
    }
  } 
  
  .submenu-filters{
    background: @lightGray;
    text-transform: lowercase;
    padding: 10px;
    
    input[type="text"]{
      width: 210px;
      border: 1px solid (@gray * 2.7);
      padding: 4px;
      background: @white;
      color: @gray;
    }
    
    .filters{
      text-align: right;
      padding-top: 5px;
      
      @media (max-width: 767px){
        text-align: center;
      }
      
      a{
        border-right: 1px solid (@gray * 1.8);
        padding: 0 20px;
        font-size: @big0;
        font-family: TitilliumLight;
        
        &:last-of-type{
          border: none;
        }
        
        &:hover, &.active{
          text-decoration: underline;
        }
      }
    }
  }
}

.lessons-container{
  background: @white;
  padding-top: 20px;
  margin-bottom: 40px;
  
  .lesson-container{
    width: 20%;
    float: left;
    height: 240px;
    
    @media (max-width: 991px) {
      width: 33%;
    }
    
    @media (max-width: 631px){
      width: 50%;
    }
    
    @media (max-width: 385px){
      width: 100%;
    }
    
    .lesson{
      position: relative;
      width: 180px;
      margin: auto;
      
      h3{
        color: @red;
        padding: 5px 0;
        font-size: @big-1; 
        font-weight: bold;
      }
      
      .lesson-length{
        display: inline;
        font-size: @small;
        position: absolute;
        top: 86px;
        left: 0;
        padding: 1px 2px;
        background: @black;
        color: @white;
      }
      
      p span{
        display: block;
        width: 180px;
        height: 20px;
        
        margin-top: 5px;
        padding-left: 30px;
        font-size: @big0;
        font-weight: normal;
        text-align: right;
        
        &.level{
          background: url('../../../images/view-icon.png') no-repeat center left;
        }
        
        &.views{
          background: url('../../../images/view-icon.png') no-repeat center left;
        }
        
        &.styles{
          background: url('../../../images/style-icon.png') no-repeat center left;
        }
        
        &.comments{
          background: url('../../../images/comments-icon.png') no-repeat center left;
        }
      }
      
      
      
      
    }
    
  }
  
  .result{
    text-align: center;
    font-family: TitilliumLight;
    font-size: @big1;
    padding: 20px;
  }
  
  .paging{
    text-align: center;
    margin-bottom: 30px;
    
    span{
      font-family: TitilliumLight;
      font-size: @big1;
      padding: 20px;
      vertical-align: top;
    }
    
    button{
      border: none;
      width: 20px;
      height: 30px;
        
      &.left{
        background: url('../../../images/left-arrow.png') no-repeat center left;
        
        &[disabled="disabled"]{
          background: url('../../../images/left-arrow-empty.png') no-repeat center left;
        }
      }
      
      &.right{
        background: url('../../../images/right-arrow.png') no-repeat center left;
        
         &[disabled="disabled"]{
          background: url('../../../images/right-arrow-empty.png') no-repeat center left;
        }
      }
    }
  }
}

.active{
  /*color: red;*/
}

.invisible{
  display: none;
}

/* Lesson detail */
.lesson-left-column{
  @media (min-width: 768px) {
    padding-right: 35px;
  }

  .lesson-detail{
    padding: 15px 0;
    background: @white;
    
    h1{
      padding: 30px 0 15px 0;
      text-transform: none;
      font-size: @big3;
    }
    
    p{
      color: @middleGray;
    }
    
    span.info{
      
      display: block;
      height: 24px;
      margin: 5px 0 0 40px;
      padding-left: 30px;
      font-size: @big0;
      font-weight: normal;
      text-align: right;
      
      @media (max-width: 1191px) {
        margin: 5px 0 0 10px;
      }
      
      &.duration{
        margin-top: 30px;
        background: url('../../../images/clock-icon-dark.png') no-repeat center left;
      }
      
      &.level{
        background: url('../../../images/clock-icon-dark.png') no-repeat center left;
      }
      
      &.style{
        background: url('../../../images/style-icon-dark.png') no-repeat center left;
      }
      
      &.comments{
        background: url('../../../images/comments-icon-dark.png') no-repeat center left;
      }
      
      &.views{
        background: url('../../../images/view-icon-dark.png') no-repeat center left;
      }
    }
    
    .video .video-js{
      background: none;
      margin: auto;
    }

    .vjs-default-skin .vjs-big-play-button{
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
  }
}

.related-videos{
  background: @white;
  padding-top: 15px;
  margin-bottom: 40px;
  
  .video-container{
    margin-bottom: 15px;
  
    .video-image{
        span{
          display: inline;
          font-size: @small;
          position: absolute;
          left: 15px;
          bottom: 0;
          padding: 1px 2px;
          background: @black;
          color: @white;
        }
        
        img{
          width: 100%;
        }
    }

    h3{
      color: @red;
      padding: 5px 0;
      font-size: @big-1; 
      font-weight: bold;
    }
    
    .video-data{
      span{
        display: block;
        color: @middleGray;
        font-weight: normal;
        text-align: right;
        padding-bottom: 4px;
        

        &.level{
          background: url('../../../images/view-icon.png') no-repeat center left;
        }

        &.style{
          background: url('../../../images/style-icon.png') no-repeat center left;
        }

        &.comments{
          background: url('../../../images/comments-icon.png') no-repeat center left;
        }

        &.views{
          background: url('../../../images/view-icon.png') no-repeat center left;
        }
      }
    }
  }
}

.comments-container{
  background: @white;
  margin: 20px -15px 40px -15px;
  padding: 15px;
  
  h2{
    text-transform: uppercase;
    font-size: @big2;
    padding-bottom: 15px;
  }
  
  .comment-list{
    border-top: 1px solid @middleGray;
    margin-top: 15px;
    padding-top: 15px;
    
    .comment-detail{
      padding-bottom: 10px;
      strong{
        font-size: @big0;
      }

      .comment-date{
        font-size: @big0;
      }
    }
  }
  
  .comments-pagination{
    font-size: @big2;
    text-align: center;
    
    span{
      vertical-align: top;
      font-family: TitilliumLight;
      font-size: @big1;
    }
    
    a{
      display: inline-block;
      width: 20px;
      height: 30px;
        
      &.left{
        background: url('../../../images/left-arrow.png') no-repeat center left;
        
        &.pasive{
          cursor: initial;
          background: url('../../../images/left-arrow-empty.png') no-repeat center left;
        }
      }
      
      &.right{
        background: url('../../../images/right-arrow.png') no-repeat center left;
        
         &.pasive{
          background: url('../../../images/right-arrow-empty.png') no-repeat center left;
        }
      }
    }
  }
}

.moto{
  margin: 30px 0 60px 0;
  
  .first{
    color: @white;
    font-size: @big4;
    font-family: TitilliumLight;
    text-shadow: 2px 2px 22px rgba(0, 0, 0, 1);
  }
  
  .second{
    color: @white;
    font-size: @big3;
    font-family: TitilliumLight;
    text-shadow: 2px 2px 22px rgba(0, 0, 0, 1);
  }
}

/* video player */
.vjs-play-control.vjs-control.vjs-paused{
  background: url('../../../images/play-icon.png') no-repeat center;
}

.vjs-play-control.vjs-control.vjs-playing{
  background: url('../../../images/pause-icon.png') no-repeat center;
}

.vjs-fullscreen-control.vjs-control {
  background: url('../../../images/fullscreen-icon.png') no-repeat center;
}

.vjs-mute-control.vjs-control.vjs-vol-0{
  background: url('../../../images/sound-off-icon.png') no-repeat center;
}

.vjs-mute-control.vjs-control, .vjs-mute-control.vjs-control.vjs-vol-1, .vjs-mute-control.vjs-control.vjs-vol-2, .vjs-mute-control.vjs-control.vjs-vol-3{
  background: url('../../../images/sound-on-icon.png') no-repeat center;
}

.vjs-default-skin .vjs-seek-handle.vjs-slider-handle:before {
  content: url('../../../images/pointer-icon.png') no-repeat center;
  font-family: VideoJS;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  text-shadow: 0em 0em 1em #fff;

  position: absolute;
  top: -7px;
  left: 0;
}

.vjs-default-skin .vjs-volume-level {
  background: @yellow !important;
}

.vjs-default-skin .vjs-play-progress{
  background: @yellow !important;
}

.vjs-default-skin .vjs-control-bar{
  background-color: @black !important;
  height: 40px !important; 
  padding-top: 5px;
}

.vjs-current-time-display, .vjs-duration-display{
  font-size: 20px;
  color: @gray;
}

.vjs-time-divider > div > span{
  margin: 0;
  padding: 0 5px;
  font-size: 20px;
  color: @gray;
}

.vjs-mute-control.vjs-control, .vjs-fullscreen-control.vjs-control {
  width: 6em !important;
}

.vjs-error-display div{
  color: #ddd;
}

